<template>
	<view>
		<!-- <view style="margin-left: 223rpx;margin-top: 20rpx;">
			<uploader />
		</view> -->
		<view class="install-container">

			<!-- 用户信息 -->
			<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
			这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
			<uni-forms :value="params['公共区域']" ref="form" validateTrigger="bind" class="word5">
				<uni-forms-item required label="检查点名称：" name="名称">
					<input maxlength="50" placeholder="请输入公共区域名称" v-model="params['公共区域']['名称']" @input="binddata('公共区域名称',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="检查点地址：" name="地址">
					<choose-address @location="getLocation" placeholder="请输入公共区域地址" v-model="params['公共区域']['地址']" @input="binddata('地址',$event)"></choose-address>
				</uni-forms-item>
				<uni-forms-item required name="消防重点关注对象" label="消防重点对象：">
					<uni-data-checkbox v-model="params['公共区域']['消防重点关注对象']" :localdata="keynoteStatus"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="备注信息：" name="备注">
					<input maxlength="50" placeholder="请填写备注信息" v-model="params['公共区域']['备注']">
				</uni-forms-item>
				<!-- <uni-forms-item>
					<facility-info></facility-info>
				</uni-forms-item>
				<uni-forms-item>
					<resident-info></resident-info>
				</uni-forms-item> -->
				<button class="grid-btn" @click="submitForm">提交</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import uploader from '../myComponents/image-uploader.vue'
	import DatePicker from '../myComponents/date-picker.vue'
	import LbPicker from './lb-picker/index.vue'
	import FacilityInfo from './facilityInfo.vue'
	import ResidentInfo from './residentInfo.vue'
	import ChooseAddress from '../myComponents/chooseAddress.vue'
	import dayjs from 'dayjs'
	export default {
		components: {
			uploader,
			DatePicker,
			LbPicker,
			FacilityInfo,
			ResidentInfo,
			ChooseAddress
		},
		data() {
			return {
				label: '请选择设施类型',
				installTypeList: this.$type.installTypeList,
				params: {
					所属网格id: null,
					lagitude: null,
					longitude: null,
					检查点类型: 'publicarea',
					公共区域: {
						名称: '',
						地址: '',
						消防重点关注对象: null,
						备注: null,
						照片上传: null
					}
				},
				keynoteStatus: [{
						text: '是',
						value: true
					},
					{
						text: '否',
						value: false
					}
				],
				//表单验证规则
				rules: {
					名称: {
						rules: [{
							required: true,
							errorMessage: '请填写公共区域名称',
						}]
					},
					地址: {
						rules: [{
							required: true,
							errorMessage: '请填写地址',
						}]
					},
					消防重点关注对象: {
						rules: [{
							required: true,
							errorMessage: '请选择是否是消防重点关注对象',
						}, ]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		created() {
			this.params.所属网格id = uni.getStorageSync('gridInfo').所属网格id 
		},
		methods: {
			getLocation(event) {
				this.params.lagitude = event.latitude
				this.params.longitude = event.longitude
				this.params.公共区域.地址 = event.address
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleConfirm(e) {
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					console.log(this.value1, '值')
					// this.params4.education = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			},
			submitForm(form) {
				
				// 手动提交表单
				this.$refs.form.submit().then(res => {

					// if (!this.resident.picture) {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: "请上传正面照片"
					// 	})
					// 	return
					// }
					console.log('表单数据信息：', res);
					this.$emit('submit',Object.assign({},this.params,{公共区域: res}))
					// this.resident.roomIds = [this.resident.roomIds]
					// this.register(Object.assign({
					// 	picture: this.resident.picture
					// }, res))
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.install-container {
		padding-bottom: 90rpx;
	}
</style>
